@font-face{ font-family:'ying'; src:url('../fonts/MONT.TTF');}
input {
  font-family: "Open Sans", sans-serif;
  font-size: 1.6rem;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

select, input[type="search"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  border: none;
}

input[type="search"] {
  border-radius: 0;
  margin-top: 0;
}


/* -------------------------------- 

Header

-------------------------------- */
.cd-main-header {
  position: absolute; right:312px;
  height: 47px; top:24px; width:47px; z-index:990;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}
.cd-main-header.nav-is-visible {
  -webkit-transform: translateX(-260px);
  -moz-transform: translateX(-260px);
  -ms-transform: translateX(-260px);
  -o-transform: translateX(-260px);
  transform: translateX(-260px);
}
.cd-main-header::before {
  /* never visible - this is used in jQuery to check the current MQ */
  display: none;
  content: 'mobile';
}





@media only screen and (min-width: 300px) {

  .cd-main-header.nav-is-visible {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  .cd-main-header::before {
    content: 'desktop';
  }
}


.cd-main-nav-wrapper::after {
  clear: both;
  content: "";
  display: table;
}





/* -------------------------------- 

Search Form

-------------------------------- */

.close {
  /* 'X' icon to close search form - hidden on small devices */
  display: none;
}
.cd-main-search input[type="search"] {
  width: 100%;
  color: #ffffff;
}
.cd-main-search input[type="search"]:focus {
  outline: none;
}
.cd-main-search input[type="search"]::-webkit-input-placeholder {
  color: #5c5d6a;
}
.cd-main-search input[type="search"]::-moz-placeholder {
  color: #5c5d6a;
}
.cd-main-search input[type="search"]:-moz-placeholder {
  color: #5c5d6a;
}
.cd-main-search input[type="search"]:-ms-input-placeholder {
  color: #5c5d6a;
}
@media only screen and (min-width: 1024px) {
  .cd-main-search {
    position: absolute;
    z-index:99;
    top: 0;
    left: 0;
    height: 90px;
    width: 100%;
    background: #14151c;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s, visibility 0.3s;
    -moz-transition: opacity 0.3s, visibility 0.3s;
    transition: opacity 0.3s, visibility 0.3s;
  }
  .cd-main-search form {
    position: relative;
    height: 100%;
    /* 170px (margin left) is the sum of the logo width (124px) and additional 46px margin (to separate the form form the logo) */
    /* 116px (margin right) takes into account the space occupied by the a.cd-search-trigger and a.close */
    margin: 0 calc(5% + 116px) 0 calc(5% + 170px);
  }
  .cd-main-search input[type="search"] {
    font-size: 18px;
    height: 100%;
    background-color: transparent;
    /* don't overlap <select> element */
    padding-right: 170px; font-family:ying;
  }

  .cd-main-search span {
    display: inline-block;
  }
  .cd-main-search option {
    /* style <option> elements on Firefox */
    color: #333545;
    background-color: #ffffff;
  }
  .cd-main-search select {
    /* the <select> element is not visible (if the list of options is not open) -  it is covered by the .selected-value element */
    position: absolute;
    right: 0;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 0;
    color: transparent;
  }
  .cd-main-search select:focus {
    outline: none;
  }
  .cd-main-search select:focus + span.selected-value {
    background-color: #3d3f4e;
  }
  .cd-main-search .selected-value {
    /* this <span> element covers the <select> element - its content is changed (using JavaScript) and set equal to the selected <option> value */
    /* its width automatically changes according to the text of the selected <option> (not possible with a <select> element) */
    color: #ffffff;
    /* clicking on this element will open the <select> drop-down list */
    pointer-events: none;
    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    transition: background-color 0.3s;
  }
  .cd-main-search select, .cd-main-search .selected-value {
    padding: 0.5em 1.7em 0.5em .3em;
    font-size: 1.4rem;
    border-radius: 3px;
  }
  .no-pointerevents .cd-main-search .selected-value {
    /* if the browser doesn't support the pointer-events property, hide the .selected-value element */
    display: none;
  }
  .no-pointerevents .cd-main-search select {
    /* if the browser doesn't support the pointer-events property, show the <select> element */
    position: relative;
    color: #ffffff;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  .no-pointerevents .cd-main-search select:focus {
    background-color: #3d3f4e;
  }
  .close {
    /* 'X' icon - used to close the search form */
    display: inline-block;
    position: absolute;
    right: 300px;
    top: 50%;
    height: 40px;
    width: 40px;
    -webkit-transform: translateY(-50%) scale(0);
    -moz-transform: translateY(-50%) scale(0);
    -ms-transform: translateY(-50%) scale(0);
    -o-transform: translateY(-50%) scale(0);
    transform: translateY(-50%) scale(0);
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
  }
  .close::before, .close::after {
    /* used to create the 'X' icon in css */
    content: '';
    position: absolute;
    height: 20px;
    width: 2px;
    background-color: #ffffff;
    left: 50%;
    top: 50%;
  }
  .close::before {
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
    -moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
    -o-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  }
  .close::after {
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    -o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
  }
  .cd-main-search.is-visible {
    /* search form open */
    opacity: 1;
    visibility: visible;
  }
  .cd-main-search.is-visible .close {
    -webkit-transform: translateY(-50%) scale(1);
    -moz-transform: translateY(-50%) scale(1);
    -ms-transform: translateY(-50%) scale(1);
    -o-transform: translateY(-50%) scale(1);
    transform: translateY(-50%) scale(1);
  }
  .animate-search .cd-main-search.is-visible {
    /* trigger search form animation if <header> has the .animate-search class */
    -webkit-animation: cd-slide-in 0.3s;
    -moz-animation: cd-slide-in 0.3s;
    animation: cd-slide-in 0.3s;
  }
}

@media screen and (max-width:1023px)and (min-width:300px){
	.cd-main-header{ top:7px; right:1%;}
	
  .cd-main-search {
    position: absolute;
    z-index:9;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
    background: #14151c;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s, visibility 0.3s;
    -moz-transition: opacity 0.3s, visibility 0.3s;
    transition: opacity 0.3s, visibility 0.3s;
  }
  .cd-main-search form {
    position: relative;
    height: 100%;
    margin: 0 calc(5%) 0 calc(5%);
  }
  .cd-main-search input[type="search"] {
    font-size: 18px;
    height: 100%;
    background-color: transparent;
    /* don't overlap <select> element */
    padding-right: 170px; font-family:ying;
  }

  .cd-main-search span {
    display: inline-block;
  }
  .cd-main-search option {
    /* style <option> elements on Firefox */
    color: #333545;
    background-color: #ffffff;
  }
  .cd-main-search select {
    /* the <select> element is not visible (if the list of options is not open) -  it is covered by the .selected-value element */
    position: absolute;
    right: 0;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 0;
    color: transparent;
  }
  .cd-main-search select:focus {
    outline: none;
  }
  .cd-main-search select:focus + span.selected-value {
    background-color: #3d3f4e;
  }
  .cd-main-search .selected-value {
    /* this <span> element covers the <select> element - its content is changed (using JavaScript) and set equal to the selected <option> value */
    /* its width automatically changes according to the text of the selected <option> (not possible with a <select> element) */
    color: #ffffff;
    /* clicking on this element will open the <select> drop-down list */
    pointer-events: none;
    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    transition: background-color 0.3s;
  }
  .cd-main-search select, .cd-main-search .selected-value {
    padding: 0.5em 1.7em 0.5em .3em;
    font-size: 1.4rem;
    border-radius: 3px;
  }
  .no-pointerevents .cd-main-search .selected-value {
    /* if the browser doesn't support the pointer-events property, hide the .selected-value element */
    display: none;
  }
  .no-pointerevents .cd-main-search select {
    /* if the browser doesn't support the pointer-events property, show the <select> element */
    position: relative;
    color: #ffffff;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  .no-pointerevents .cd-main-search select:focus {
    background-color: #3d3f4e;
  }
  .close {
    /* 'X' icon - used to close the search form */
    display: inline-block;
    position: absolute;
    right: 1%;
    top: 50%;
    height: 40px;
    width: 40px;
    -webkit-transform: translateY(-50%) scale(0);
    -moz-transform: translateY(-50%) scale(0);
    -ms-transform: translateY(-50%) scale(0);
    -o-transform: translateY(-50%) scale(0);
    transform: translateY(-50%) scale(0);
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
  }
  .close::before, .close::after {
    /* used to create the 'X' icon in css */
    content: '';
    position: absolute;
    height: 20px;
    width: 2px;
    background-color: #ffffff;
    left: 50%;
    top: 50%;
  }
  .close::before {
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
    -moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
    -o-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  }
  .close::after {
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    -o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
  }
  .cd-main-search.is-visible {
    /* search form open */
    opacity: 1;
    visibility: visible;
  }
  .cd-main-search.is-visible .close {
    -webkit-transform: translateY(-50%) scale(1);
    -moz-transform: translateY(-50%) scale(1);
    -ms-transform: translateY(-50%) scale(1);
    -o-transform: translateY(-50%) scale(1);
    transform: translateY(-50%) scale(1);
  }
  .animate-search .cd-main-search.is-visible {
    /* trigger search form animation if <header> has the .animate-search class */
    -webkit-animation: cd-slide-in 0.3s;
    -moz-animation: cd-slide-in 0.3s;
    animation: cd-slide-in 0.3s;
  }
}

@-webkit-keyframes cd-slide-in {
  0% {
    -webkit-transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes cd-slide-in {
  0% {
    -moz-transform: translateY(-100%);
  }
  100% {
    -moz-transform: translateY(0);
  }
}
@keyframes cd-slide-in {
  0% {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}

@media only screen and (min-width: 300px) {

  .animate-search .is-visible .cd-search-suggestions {
    /* trigger the dropdown animation if <header> has the .animate-search class */
    -webkit-transform-origin: center top;
    -moz-transform-origin: center top;
    -ms-transform-origin: center top;
    -o-transform-origin: center top;
    transform-origin: center top;
    /* Force Hardware Acceleration */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-animation: cd-3d-rotation 0.5s 0.3s;
    -moz-animation: cd-3d-rotation 0.5s 0.3s;
    animation: cd-3d-rotation 0.5s 0.3s;
    -webkit-animation-fill-mode: backwards;
    -moz-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
  }
}

@-webkit-keyframes cd-3d-rotation {
  0% {
    -webkit-transform: perspective(1000px) rotateX(-90deg);
  }
  100% {
    -webkit-transform: perspective(1000px) translateY(0);
  }
}
@-moz-keyframes cd-3d-rotation {
  0% {
    -moz-transform: perspective(1000px) rotateX(-90deg);
  }
  100% {
    -moz-transform: perspective(1000px) translateY(0);
  }
}
@keyframes cd-3d-rotation {
  0% {
    -webkit-transform: perspective(1000px) rotateX(-90deg);
    -moz-transform: perspective(1000px) rotateX(-90deg);
    -ms-transform: perspective(1000px) rotateX(-90deg);
    -o-transform: perspective(1000px) rotateX(-90deg);
    transform: perspective(1000px) rotateX(-90deg);
  }
  100% {
    -webkit-transform: perspective(1000px) translateY(0);
    -moz-transform: perspective(1000px) translateY(0);
    -ms-transform: perspective(1000px) translateY(0);
    -o-transform: perspective(1000px) translateY(0);
    transform: perspective(1000px) translateY(0);
  }
}
.cd-search-trigger {
  /* trigger serach form visibility - hidden on small devices */
  display: none;
}
@media only screen and (min-width: 1024px) {
  .cd-search-trigger {
    display: block;
    position: relative;
    z-index: 3;
    height: 40px;
    width: 40px;
    float: right;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
  }
  .cd-search-trigger::after, .cd-search-trigger:before {
    /* used to create the icon lens and the background circle */
    content: '';
    position: absolute;
  }
  .cd-search-trigger::after {
    /* icon lens */
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    height: 41px;
    width: 41px;
    background: url(../images/xiang1_05.png) no-repeat center; background-size:41px;
  }
  .cd-search-trigger::before {
    /* background circle */
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0);
    -moz-transform: translateX(-50%) translateY(-50%) scale(0);
    -ms-transform: translateX(-50%) translateY(-50%) scale(0);
    -o-transform: translateX(-50%) translateY(-50%) scale(0);
    transform: translateX(-50%) translateY(-50%) scale(0);
    height: 100%;
    width: 100%;
    background-color: #f7484f;
    border-radius: 50%;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
  }
  .no-touch .cd-search-trigger:hover::before {
    background-color: #f7484f;
  }
  .cd-main-header.search-form-visible{
    -webkit-transform: translateX(-46px);
    -moz-transform: translateX(-46px);
    -ms-transform: translateX(-46px);
    -o-transform: translateX(-46px);
    transform: translateX(-46px);
  }
  .cd-main-header.search-form-visible::before {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
    -moz-transform: translateX(-50%) translateY(-50%) scale(1);
    -ms-transform: translateX(-50%) translateY(-50%) scale(1);
    -o-transform: translateX(-50%) translateY(-50%) scale(1);
    transform: translateX(-50%) translateY(-50%) scale(1);
  }
  
  .cd-main-header.search-form-visible .cd-search-trigger::after {
    /* background circle */
    left: 50%;
    top: 50%;
    height: 100%;
    width: 100%;
    background-color: #fff;
    border-radius: 50%;
  }
}







@media screen and (max-width:1919px)and (min-width:1440px){
	.cd-main-header { right:270px; height: 42px; top:17px; width:42px; z-index:990;}
	.cd-main-search{ height:80px;}	
	.close{ right:270px;}
}
@media screen and (max-width:1439px)and (min-width:1280px){
	.cd-main-header { right:238px; height: 39px; top:15px; width:39px; z-index:990;}
	.cd-main-search{ height:80px;}	
	.close{ right:238px;}
}
@media screen and (max-width:1275px)and (min-width:1024px){
	.cd-main-header { right:54px; height:38px; top:10px; width:38px; z-index:990;}
	.cd-main-search{ height:60px;}	
	.close{ right:62px;}
	.headera .cd-search-trigger::after {  background-size: 35px;}
.cd-search-trigger{ width:35px; height:35px;}
.cd-search-trigger::after {
    height: 35px;
    width: 35px;
    background: url(../images/xiang1_05.png) no-repeat center;
    background-size: 35px;
}


	
}